// 商品的基本信息
<template>
  <div v-if="Object.keys(goodInfo).length>0" class="details-base-info">
    <!-- 标题 -->
    <div class="title">{{goodInfo.title}}</div>
    <!-- 现价,原价,今日特价 -->
    <div class="price">
      <span class="real-price">{{goodInfo.newPrice}}</span>
      <span class="old-price" v-if="!this.CommonUtils.isEmpty(goodInfo.oldPrice)">{{goodInfo.oldPrice}}</span>
      <span class="discoun-desc" v-if="!this.CommonUtils.isEmpty(goodInfo.discountDesc)">{{goodInfo.discountDesc}}</span>
    </div>

    <!-- 销量,收藏,发货 -->
    <div class="sale-colection-pay">
      <div class="sale">{{goodInfo.columns[0]}}</div>
      <div class="colection">{{goodInfo.columns[1]}}</div>
      <div class="pay">{{goodInfo.services[goodInfo.services.length-1].name}}</div>
    </div>

    <!-- 退货补运费,全国包邮,7天无理由退货,这里展示的数据是goodInfo.services的不包含最后一个对象的数据 -->
    <div class="mail-info">
      <span class="mail-item" v-for="index in (goodInfo.services.length-2)" :key="index">
        <img class="mail-icon" :src="goodInfo.services[index].icon" />
        <span class="mail-text">{{goodInfo.services[index].name}}</span>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {},
  computed: {},
  components: {},
  props: {
    goodInfo: {
      type: Object,
      default(){
        return {};
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.details-base-info {
  margin-top: 16px;
  margin-left: 8px;
  margin-right: 8px;
  .title {
    font-size: 14px;
    color: var(--color-text);
    font-weight: bold;
  }

  //现价,原价,折扣
  .price {
    margin-top: 4px;
    height: 24px;
    line-height: 24px;
    font-weight: normal;
    .real-price {
      color: var(--color-high-text);
    }
    .old-price {
      margin-left: 4px;
      font-size: 12px;
      text-decoration: line-through;
    }
    .discoun-desc {
      margin-left: 8px;
      padding: 2px 8px;
      border-radius: 12px;
      color: white;
      font-size: 12px;
      background-color: var(--color-high-text);
    }
  }

  //销量,收藏,快递
  .sale-colection-pay {
    display: flex;
    font-size: 12px;
    margin-top: 2px;
    height: 28px;
    padding-bottom: 30px;
    line-height: 28px;
    border-bottom: 1px solid rgba(100, 100, 100, 0.1);
    color: var(--color-glay);
    .colection {
      flex: 1;
      text-align: center;
    }
  }

  //快递相关部分
  .mail-info {
    display: flex;
    justify-content: space-between;
    line-height: 52px;
    font-size: 12px;
    .mail-item {
      .mail-icon {
        width: 12px;
        height: 12px;
        vertical-align: middle;
        position: relative;
        top: -2px;
        margin-right: 3px;
      }
    }
  }
}
</style>